<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
<title>迅雷管理</title>
<script src="../assets/js/jquery.min.js"></script>

<style>
* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
}

.table_container {
	margin: 15px;
}

.jc_table td, thead th {
	text-align: center;
}

.page {
	width: 300px;
	margin: 0 auto;
}

.page a {
	padding: 0 5px;
}

.checkbox {
	text-align: center;
}

#imgAll {
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 99;
	left: 0;
	top: 0;
	display: none;
}

#imgAll p {
	padding-top: 15px;
	color: #fff;
}

.upPage {
	position: absolute;
	z-index: 100;
	top: 100px;
	left: 100px;
}
#page_sel{
width:auto;
}
</style>
</head>
<body>
	<div class="table_container">
		<table class="jc_table table table-striped table-bordered">
			<thead>
				<tr>
					<th>名字</th>
					<th>下载进度</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody class="jc_tbody">
			</tbody>
		</table>
	</div>
	<div class="page">
		<a href="javascript:void(0)" class="first_page">&lt;&lt;首页</a> <a
			href="javascript:void(0)" class="prev">上一页</a> <select id="page_sel">
		</select> <a href="javascript:void(0)" class="next">下一页</a> <a
			href="javascript:void(0)" class="last_page">尾页&gt;&gt;</a>

	</div>
	<!-- 遮罩层 -->
	<div id="imgAll">
		<div class="upPage">
			<img src="loading.gif">
			<p>删除中...</p>
		</div>
	</div>
	<script src="../assets/js/jquery.min.js"></script>
	<script src="../assets/js/jquery.scrolly.min.js"></script>
	<script src="../assets/js/jquery.scrollex.min.js"></script>
	<script src="../assets/js/skel.min.js"></script>
	<script src="../assets/js/util.js"></script>
	<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="../assets/js/main.js"></script>
	<script type="text/javascript">

	
	//遮罩层动态样式
	var upPage = document.querySelector(".upPage");
	
		$(".upPage").css("top",window.innerHeight*0.5 + document.body.scrollTop - upPage.offsetHeight/2);
	    $(".upPage").css("left",window.innerWidth*0.5 + document.body.scrollTop - upPage.offsetHeight/2);
	   		console.log("upPage.style.top:" + upPage.style.top + "upPage.style.left"+ upPage.style.left);
	var url ="http://118.178.142.172:80/";
	     var allData =[];
		 var jc_page = {
 	    "openID":"",
 		 "row":"10",
 		 "page":"1"
     };	
     var temp = window.location.href;
     var code = temp.split("?")[1].split("&")[0].split("=")[1];
     $.ajax({
     	url:url + "api/getOpenID",
     	type:"POST",
     	data:{"code":code},
     	dataType:"JSON",
     	async: false,
     	success:function(data){
     		jc_page.openID = data.openID;
     	}
     });
function getAll(jc_page){
	$.ajax({
		url:url + "thunder/getAll",
		type:"POST",
		data:jc_page,
		dataType:"json",
		async:false,
		success:function(data){
			$.each(data.page,function(index,key){
				allData.push(key);
		})
			if(allData.length > 0){
				console.log("已获取所有数据");
			}
			else{
				console.log("获取所有数据失败");
			}
			 //初始化调用
			 getPage(jc_page);
	}
	})
}
getAll(jc_page);

function getPage(jc_page){
	if(jc_page.page <= Math.ceil(allData.length / jc_page.row)){
	var startPos = (Number(jc_page.page) - 1) * Number(jc_page.row);
	var end = (startPos + Number(jc_page.row)) < allData.length ?　(startPos+Number(jc_page.row)) - 1:allData.length - 1;
	
	$(".jc_tbody").empty();
	console.log("startPos："+ startPos + "end:"+ end);
	if(allData.length > 0){
	for(var i = startPos;i<=end;i++){
		//进度条
		var temp = (allData[i].TotalReceiveValidSize /  allData[i].ResourceSize *100).toFixed(2);
		var temp2 = Number(temp) + '%'
		$(".jc_table").append("<tr><td>" + allData[i].Name + "</td><td>" + "<div class=progress progress-striped active><div class=progress-bar progress-bar-success role=progressbar aria-valuenow="+ temp +" aria-valuemin=0 aria-valuemax=100 style=width:"+temp2+";><span class=‘sr-only’>"+temp+"%</span></div></div>" + "</td><td><button class='btn del' onclick='delRow(this)' data_id='"+ allData[i].TaskId +"'>删除</button></td></tr>");
	}
	jcTotPag(Math.ceil(allData.length / jc_page.row),jc_page.page);
}
}
	else{
		jc_page.page = Number(jc_page.page) - 1;
		getPage(jc_page);
	}

}
function delRow(obj){
	$.ajax({
		url:url + "thunder/delete/"+$(obj).attr("data_id"),
		type:"POST",
		data:{"openID":jc_page.openID},
		dataType:"json",
		beforeSend:function(){
			$("#imgAll").css("display","block");
			$("body").css("overflow","hidden");		
		},
		success:function(data){
			if(data.RESULT == "SUCCESS"){
				var startPos = (Number(jc_page.page) - 1) * Number(jc_page.row);
				//rowIndex从1开始不是0
				allData.splice(obj.parentNode.parentNode.rowIndex + startPos - 1 , 1);
				getPage(jc_page);
				alert("删除成功");
			}
			else{
				alert("删除失败");
			}
		},
		complete:function(){
			$("#imgAll").css("display","none");
			$("body").css("overflow","auto");	
		},
	})
}
//修改下拉框value
function jcTotPag(n,pageNumber){
	$("#page_sel").empty();
	for(var i = 1; i<=n;i++){
	$("#page_sel").append('<option value='+i+'>'+i+'</option>');
}
$("#page_sel").val(pageNumber);
}


		
		 //分页动作
		 $("#page_sel").on("change",function(){
		 	jc_page.page = $(this).val();
		 	getPage(jc_page,$(this).val());
		 	
		 });
		 //上一页的功能
		 $(".prev").on("click",function(){
		 	var page_sel = $("#page_sel");
		 	var val = Number(page_sel.val());
		 	if( val != 1){
		 		page_sel.val( val - 1 + "");
		 		page_sel.change();
		 	}
		 });
		 //下一页的功能
		  $(".next").on("click",function(){
		 	var page_sel = $("#page_sel");
		 	var val = Number(page_sel.val());
		 	if( val != page_sel.find("option").length){
		 		page_sel.val( val + 1 + "");
		 		page_sel.change();
		 	}
		 });

		  //首页功能
		  $(".first_page").on("click",function(){
		  	if($("#page_sel").val() != 1){
		  		$("#page_sel").val(1);
		 		$("#page_sel").change();
		  	}
		  });
		  //尾页功能
		  $(".last_page").on("click",function(){
		  	if($("#page_sel").val() != $("#page_sel").find("option").length){
		  		$("#page_sel").val($("#page_sel").find("option").length);
		 		$("#page_sel").change();
		  	}
		  });
	</script>
</body>
</html>
